<template>
  <div >
    <el-card class="box-card">
      <el-form label-width="80px">
        <el-form-item label="学科名称">
          <el-input placeholder="请输入学科名称" class="inputw" v-model="queryData.subjectName"></el-input>
          <el-button @click="closeValue" >清除</el-button>
          <el-button @click="getList" type="primary" >搜索</el-button>
          <el-button class="adds" type="success" icon="el-icon-edit" @click="addDialogVisible = true">新增学科</el-button>  
        </el-form-item>
      </el-form>
      <!-- 警告信息 -->
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        show-icon>
      </el-alert>
      <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号" ></el-table-column>
          <el-table-column label="学科名称" prop="subjectName" ></el-table-column>
          <el-table-column label="创建者" prop="creator" >超级管理员</el-table-column>
          <el-table-column label="创建日期" prop="addDate" >
            <template slot-scope="scope">
              <div>
                {{ getTiems(scope.row.addDate) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示" prop="isFrontDisplay">
            <template slot-scope="scope">
              <div v-if="scope.row.isFrontDisplay === 1">是</div>
              <div v-if="scope.row.isFrontDisplay === 0">否</div>
            </template>
          </el-table-column>
          <el-table-column label="二级目录" prop="twoLevelDirectory" ></el-table-column>
          <el-table-column label="标签" prop="tags" ></el-table-column>
          <el-table-column label="题目数量" prop="totals" ></el-table-column>
          <el-table-column label="操作" width="240px">
            <template slot-scope="scope">
              <el-button type="text" @click="Classification(scope.row)">学科分类</el-button>
              <el-button type="text" @click="Curriculum(scope.row)">学科标签</el-button>
              <el-button type="text" @click="showFditDialog(scope.row)">修改</el-button>
              <el-button type="text" @click="removeFditDialog(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pageTool @pageChange="pageChange" @pageSizeChange="pageSizeChange" :total="counts" :paginationPage="queryData.page" :paginationPagesize="queryData.pagesize"></pageTool>
    </el-card>
    <!-- 修改用户 -->
    <el-dialog
      title="修改学科"
      :visible.sync="editDialogVisible"
      width="30%"
      @change='abbSubject'>
      <el-form :model="editForm" ref="editFormRef" label-width="80px">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="editForm.editSubjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ediuserinfo" >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增学科 -->
    <el-dialog
      @close='addFormClose'
      title="新增学科"
      :visible.sync="addDialogVisible"
      width="30%"
      @change='abbSubject'>
      <el-form :model="ruleForm" ref="addFormref" label-width="80px" :rules="addFormRules">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="ruleForm.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubject">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入分页组件（文件pageTool.vue中封装的方法）
import pageTool from '@/module-dashboard/components/pageTool.vue'
import { list, update, remove, add} from '@/api/hmmm/subjects.js'
import { parseTime } from '@/utils/index.js'
export default {
  data () {
    return {
      // 获取学科列表数据
      queryData: {
        // 关键字
        subjectName:'',
        // 当前每页显示多少条数据
        pagesize: 10,
        // 当前页码数
        page: 1
      },
      addInfo: {
        id: '',
        directoryName: '',
        isFrontDisplay: ''
      },
      list: [],
      value: true,
      counts: 0,
      ruleForm: {
        subjectName: '',
        isFrontDisplay: 1
      },
      // 控制添加学科的对话框显示与隐藏
      addDialogVisible: false,
      // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      // 修改对话框里的数据 用于提交
      editForm: {
        editSubjectName: '',
        isFrontDisplay: 0,
      },
      id: '',
      addFormRules: {
        subjectName: [
          {required: true, message: '请填写角色名称', trigger: 'blur' },
          { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  components: {
    pageTool
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const { data: res } = await list(this.queryData)
      this.list = res.items
      this.counts = res.counts
      console.log(res)
    },
    closeValue () {
      this.queryData.subjectName = ''
      this.getList()
    },
    // 格式化日期
    getTiems (time) {
      return parseTime(new Date(time))
    },
    // 监听当前页面显示数据条数
    pageSizeChange (val) {
      console.log(val)
      this.queryData.pagesize = val
      this.getList()
    },
      // 监听当前页码值
    pageChange(val) {
      console.log(val)
      // this.queryData.Page = 10
      this.queryData.page= val
      this.getList()
    },
    abbSubject () {
        this.$refs.editForm.resetFields()
    },
    // 添加学科
    addSubject () {
      this.$refs.addFormref.validate(async flag => {
        if ( !flag ) return
          const res = await add(this.ruleForm)
          // console.log(res)
          if ( res.status !== 200) return this.$message.error('添加失败')
          this.$message.success("添加成功")
          this.addDialogVisible = false
          this.getList()
      })
    },
    // 清空添加表单
    addFormClose () {
      this.$refs.addFormref.resetFields()
    },
    // 修改对话框的显示与隐藏
    showFditDialog(row) {
      this.editDialogVisible = true
      this.id= row.id
      console.log(row)
      this.editForm.editSubjectName = row.subjectName
      this.editForm.isFrontDisplay = row.isFrontDisplay
      this.id = row.id
      if (this.editForm .isFrontDisplay === 1) {
        this.value = true
      } else {
        this.value = false
      }
    },
    ediuserinfo() {
      // 表单的预验证并提交
      this.$refs.editFormRef.validate(async flag => {
        if(!flag) return
        // const id = this.editForm.id
        const res = await update({
          id:this.id, 
          subjectName: this.editForm.editSubjectName
          })
        // if(res.status !== 200) {
        //   return this.$message.error('修改用户信息失败')
        // }
        console.log(res)
        this.getList()
        this.$message.success('修改成功')
        this.editDialogVisible = false
      })
    },
    removeFditDialog(id) {
      // 弹框提示用户是否删除
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await remove({
          id:id
        })
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击学科分类跳转
    Classification (row) {
      this.$router.push({
        path: '/directorys',
        name: 'subjects-directorys',
        query: { id: row.id, subjectName: row.subjectName }})
    },
    // 点击学科标签跳转
    Curriculum (row) {
      console.log(row)
      this.$router.push({path: '/subjects/tags',
      query: { id: row.id, subjectName: row.subjectName }})
      console.log(row.id)
    }
  }
}
</script>

<style scoped lang='less'>
.inputw {
  width: 180px;
  padding: 0 10px
}
.adds {
  float: right
}
.el-pagination {
  margin-top: 15px
}
</style>
